<style>
    .card-block {
        display: flex;
    }

    .card_col4_one {

        width: 17%;
        margin-left: 6%;
        height: 160px;
        margin-top: 0px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/baodao2.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_col4_two {

        width: 17%;
        margin-left: 6%;
        height: 160px;
        margin-top: 0px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/qingjia3.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_col4_three {

        width: 17%;
        margin-left: 6%;
        height: 160px;
        margin-top: 0px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/xinli.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_col4_four {

        width: 17%;
        margin-left: 6%;
        height: 160px;
        margin-top: 0px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/xuexi.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_col3_one {

        width: 17%;
        margin-top: 20px;
        margin-left: 12%;
        height: 160px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/renyuanguanli.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_col3_two {

        width: 17%;
        margin-top: 20px;
        margin-left: 12%;
        height: 160px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/shipinguanli.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_col3_three {

        width: 17%;
        margin-top: 20px;
        margin-left: 12%;
        height: 160px;
        border-radius: 5px;
        display: flex;
        background-image: url("http://61.181.104.62:8081/mainfile/wodegongzuo2.png");
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    .card_left {
        width: 90px;
        height: 90px;
        color: #fff;
        line-height: 90px;
        text-align: center;
        border-radius: 50%;
        margin: 40px 30px;
    }

    .card_right {
        flex: 1;
        /* line-height: 165px;*/
        font-size: 25px;
        /* padding-left: 18px;*/
        margin-top: 98%;
        margin-left: 6%;

        text-align: center;
    }

    .content {
        background-color: gainsboro;
        /* background-color:gray;*/
        /*dasdad*/

        width: 100%;
        height: 100%;
    }

    .main-content {
        margin-top: 2%;

    }

    .iconfont {
        font-size: 50px;
    }

    .color1 {
        background: #3F51B5;
    }

    .color2 {
        background: #2dcb73;
    }

    .color3 {
        background: #ff604f;
    }

    .color4 {
        background: #FF9800;
    }

    .breadcrumb-item {
        margin-left: 30%;
        font-weight: bold;
        height: 50px;
        font-size: 30px;
        text-align: center;

    }

</style>
<section class="content">
    <header class="content__title">
        <ol class="breadcrumb">
            <li class="breadcrumb-item" style="color: #0c7cd5">社区服刑人员辅助系统</li>
        </ol>
    </header>
    <div class="main-content">
        <div class="card-block">
            <div id="zf" style="width: 100%;display: flex;">

                <div class="card_col4_one" name="prisoner/report" onclick="loadMain(this);">
                    <!--<div class="card_left color1"><i class="iconfont icon-cursoure"></i></div>-->

                    <div class="card_right">报道</div>
                </div>
                <div class="card_col4_two" name="free/index" onclick="loadMain(this);">
                    <!--<div class="card_left color2"><i class="iconfont icon-help"></i></div>-->
                    <div class="card_right">请假</div>
                </div>
                <div class="card_col4_three">
                    <!--<div class="card_left color3"><i class="iconfont icon-heart"></i></div>-->
                    <div class="card_right">心理</div>
                </div>
                <div class="card_col4_four" name="video/index" onclick="loadMain(this);">
                    <!--<div class="card_left color4"><i class="iconfont icon-cup"></i></div>-->
                    <div class="card_right">学习</div>
                </div>
            </div>
        </div>
        <div id="gl">
            <div style="width: 100%;display: flex;">
                <div class="card_col3_one" name="prisoner/list" onclick="loadMain(this);">
                    <!--<div class="card_left color1"><i class="iconfont icon-share"></i></div>-->
                    <div class="card_right">人员管理</div>
                </div>
                <div class="card_col3_two" name="video/set" onclick="loadMain(this);">
                    <!--<div class="card_left color2"><i class="iconfont icon-video"></i></div>-->
                    <div class="card_right">视频管理</div>
                </div>
                <div class="card_col3_three" name="task/policeJob" onclick="loadMain(this);">
                    <!--<div class="card_left color3"><i class="iconfont icon-mouse"></i></div>-->
                    <div class="card_right">我的工作</div>
                </div>
            </div>
        </div>

    </div>
    <div data-th-include="common/footer"></div>
</section>